<template>
    <div @click="goToDetail">
        <div class="swiper" v-if="imgList && imgList.length === 1">
            <!--单图不轮播-->
            <a href="javascript:void(0)" :data-action="imgList[0].action"><img :src="imgList[0].icon" /></a>
        </div>
        <swiper :options="swiperOption" ref="mySwiper" class="swiper" v-if="imgList && imgList.length > 1">
            <swiper-slide v-for="(item, index) in imgList" :key="index">
                <a href="javascript:void(0)" :data-action="item.action"><img :src="item.icon" /></a>
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
    import Vue from 'vue';
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import common from '../../../assets/js/common';

    Vue.use(VueAwesomeSwiper)

    export default{
        props: ['imgList'],
        data (){
            console.log(this.imgList.length);
            return {
                swiperOption: {
                    autoplay: 3000,
                    pagination: '.swiper-pagination',
                    mousewheelControl: true,
                    loop : true,
                    loopAdditionalSlides : 1,
                    autoplayDisableOnInteraction: false
                }
            };
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper
            }
        },
        methods: {
            goToDetail($event) {
                // swiper 轮播图 loop:true 的时候捕获不到新增的div的click事件
                let hostName = window.location.origin;
                let url = '';
                if ($event.target.tagName.toLowerCase() === 'img') {
                    let action = $($event.target).parent().attr('data-action');
                    url = hostName + '/service/dispacher/0?id=' + action;
                    if (common.isApp()) {
                        lb.newWebview({'url': url});
                    } else {
                        window.location.href = url;
                    }
                }
            }
        }
    }
</script>

<style lang="scss">
    .swiper {
        overflow: hidden;
        height: 18.7rem!important;
        margin-bottom: -0.75rem;
        background: #ccc;
        a {
            display: block;
            width: 100%;
            height: 18.7rem;
        }
        img {
            width: 100%;
            height: 100%;
        }
        .swiper-pagination-bullet {
            width: 6px;
            height: 6px;
            border-radius: 50%;
        }
        .swiper-pagination-bullets {
            padding-right: 10px;
            text-align: right!important;
        }
        .swiper-pagination-bullet-active {
            background: #fff;
        }
    }
</style>
